<template>
    <div class="admin">
        <h1>金河田物业门禁人脸录入系统</h1>
        <div>
            <span class="label-name">所在小区：</span>
            <el-select v-model="community_id" @change="change" style="width: 160px">
                <el-option v-for="community in communityList" :label="community.community_name"
                           :value="community.community_id"
                           :key="community.community_id">{{community.community_name}}
                </el-option>
            </el-select>
        </div>
        <div class="info">
            <label>
                <span class="label-name">日期：</span>
                <el-date-picker type="daterange" v-model="date" value-format="yyyy-MM-dd" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" @change="change"/>
            </label>
            <el-button type="primary" @click="exportExcel">导出当前日期人员信息电子表格</el-button>
            <el-button type="primary" @click="exportImg">导出当前日期照片</el-button>
        </div>
        <div>
            <el-button @click="showImg">{{showAll?'取消显示全部照片':'显示全部照片'}}</el-button>
        </div>
        <div>
            <el-table :data="tableData" border stripe>
                <el-table-column type="index" width="50"/>
                <el-table-column prop="full_name" width="" label="用户名"/>
                <el-table-column prop="community_name" width="" label="小区"/>
                <el-table-column prop="room_addr" width="" label="楼栋单元门号"/>
                <el-table-column width="" label="照片">
                    <template slot-scope="scope">
                        <img style="cursor: pointer;width: 200px;max-height: 200px" :src="scope.row.showImg||showAll?scope.row.head_link:null"
                             alt="点击显示照片" @click="preview(scope.$index)"/>
                    </template>
                </el-table-column>
                <el-table-column width="" label="录入时间">
                    <template slot-scope="scope">
                        <div>{{scope.row.create_time?scope.row.create_time.split('T')[0]:scope.row.create_time}}</div>
                    </template>
                </el-table-column>
                <el-table-column width="" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="del(scope.row)">删除</el-button>
<!--                        <el-button @click="showImg(scope.$index)">显示照片</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="display: flex;align-items: center">
            每页显示条数：
            <el-select v-model="pagesize" style="width: 60px" @change="getTableData">
                <el-option :value="10">10条</el-option>
                <el-option :value="20">20条</el-option>
                <el-option :value="50">50条</el-option>
                <el-option :value="100">100条</el-option>
            </el-select>
            <el-pagination background @size-change="sizeChange" @current-change="pageChange"
                           layout="prev, pager, next" :current-page="page" :page-size="pagesize"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                date: [this.$moment(new Date().valueOf() - 1000 * 60 * 60 * 24 * 3).format('YYYY-MM-DD'), this.$moment().format('YYYY-MM-DD')],
                community_id: '',
                tableData: [],
                communityList: [],
                showAll: false,
                page: 1,
                pagesize: 20,
                total: 0,
            }
        },
        mounted() {
            this.getCommunityList();
        },
        methods: {
            change(){
                this.page = 1;
                this.getTableData()
            },
            getTableData() {
                let params = {
                    page: this.page,
                    pagesize: this.pagesize,
                    community_id: this.community_id
                };
                if (this.date && this.date.length === 2) {
                    params.begin = this.date[0]+' 00:00:00';
                    params.end = this.date[1]+' 23:59:59';
                }
                this.$api.get('/api-select-information_list', params, (res) => {
                    this.tableData = res.result;
                    this.total = res.count;
                })
            },
            getCommunityList() {
                this.$api.get('/api-select-community', null, (res) => {
                    if(res&&res.length&&res.length>0){
                        this.community_id=res[0].community_id;
                        this.communityList = res;
                        this.getTableData();
                    }else {
                        this.$message.warning('请先添加小区');
                        this.$router.push('/community')
                    }
                })
            },
            exportExcel() {
                if (!this.date || this.date.length !== 2) {
                    this.$message.warning('请选择日期范围');
                    return;
                }
                let params = {
                    begin: this.date[0]+' 00:00:00',
                    end: this.date[1]+' 23:59:59',
                    community_id:this.community_id
                };
                window.open(`${window.root}/api-export-excel?begin=${params.begin}&end=${params.end}&community_id=${params.community_id}`)
            },
            exportImg() {
                if (!this.date || this.date.length !== 2) {
                    this.$message.warning('请选择日期范围');
                    return;
                }
                let params = {
                    begin: this.date[0]+' 00:00:00',
                    end: this.date[1]+' 23:59:59',
                    community_id:this.community_id
                };
                window.open(`${window.root}/api-export-head?begin=${params.begin}&end=${params.end}&community_id=${params.community_id}`)
            },
            del(row) {
                console.log(row)
                this.$confirm(`确认删除${row.full_name}的录入信息？`).then(()=>{
                    this.$api.get('/api-delete-information', {id: row.id}, (res) => {
                        this.$message.success(res);
                        this.getTableData()
                    })
                }).catch(()=>{})
            },
            showImg(index) {
                if (!isNaN(index)) {
                    this.tableData[index] = Object.assign({}, this.tableData[index], {showImg: !this.tableData[index].showImg});
                    this.tableData = this.tableData.slice()
                } else {
                    this.showAll = !this.showAll
                }
            },
            sizeChange(val) {
                this.pagesize = val;
                this.getTableData()
            },
            pageChange(val) {
                this.page = val;
                this.getTableData();
                this.showAll=false;
            },
            preview(index) {
                let src = this.tableData[index].head_link;
                let viewW=document.body.clientWidth;
                let viewH=document.body.clientHeight;
                let img=new Image()
                img.src=src;
                let that=this;
                img.onload=function () {
                    let max=0,key='';
                    if(img.width>img.height){
                        max=img.width;
                        if(max>viewW){
                            max=viewW;
                            key='max-width';
                        }
                    }else {
                        max=img.height
                        if(max>viewH){
                            max=viewH;
                            key='max-height'
                        }
                    }
                    that.$alert(`<div style="text-align: center"><img style="${key}: ${max*0.8}px" src="${src}" alt=""/></div>`, '预览', {
                        dangerouslyUseHTMLString: true,
                        showConfirmButton:false,
                        showCancelButton:false,
                        customClass:'imgPreviewer',
                        closeOnPressEscape:true,
                        closeOnClickModal:true,
                    }).then(()=>{}).catch(()=>{})
                }

            }
        }
    }
</script>
<style lang="scss">
    .admin {
        .label-name {
            display: inline-block;
            width: 100px;
            text-align: center;
        }

        & > div {
            margin-bottom: 20px;
        }

        .info {
            & > label {
                margin-right: 20px;
            }
        }
    }
    .imgPreviewer{
        width: auto!important;
        min-width: 400px;
    }
</style>
